<template>
    <h3 style="text-align: center;">用户购买理财页面</h3>
    <table class="table table-bordered">
        <tr>
            <td>理财产品名称</td>
            <td>
                {{ data.F_Name }}
            </td>
        </tr>
        <tr>
            <td>年收益</td>
            <td>
                {{ data.F_APY }}
            </td>
        </tr>
        <tr>
            <td>最低金额</td>
            <td>
                {{ data.F_MinMoney }}
            </td>
        </tr>
        <tr>
            <td>风险等级</td>
            <td>
                {{ data.F_Level }}
            </td>
        </tr>
        <tr>
            <td>购买金额</td>
            <td>
                <input type="text" @change="ChangeMoney" v-model="data.Bmoney" />
            </td>
        </tr>
        <tr>
            <td>每年预计收益</td>
            <td>
                <input type="text" v-model="data.BsumMoney" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button @click="BuyInfo">购买</button>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { useRoute } from 'vue-router'
import axios from 'axios';
import { onMounted, ref } from 'vue';
import router from '../../router';

//创建路由实例
const route = useRoute();
//获取路由编号
const Fid = route.params.Fid;
const ULid = route.params.ULid;

const data = ref({
    F_Name: "",
    F_APY: "",
    F_MinMoney: "",
    F_Level: '',
    Bmoney: '',
    BsumMoney: ''
})


//生命周期钩子
onMounted(() => {
    axios({
        method: "get",
        url: "https://localhost:44305/api/Finans/GetFinancingInfo",
        params: {
            Fid: Fid
        }
    })
        .then(function (res) {
            data.value.F_Name = res.data.F_Name;
            data.value.F_APY = res.data.F_APY;
            data.value.F_MinMoney = res.data.F_MinMoney;
            data.value.F_Level = res.data.F_LevelChange;
        })
        .catch(function (error) {
            console.log(error);
        })
})

//计算每年预计收益
const ChangeMoney = () => {
    data.value.BsumMoney = (Number(data.value.Bmoney) * Number(data.value.F_APY) / 100).toFixed(2) + 'CNY';

}


//用户添加理财
const BuyInfo = () => {
    //判断理财金额不能为空
    if (!data.value.Bmoney) {
        alert('理财金额不能为空');
        return;
    }

    //判断理财金额不能小于最低理财金额
    if (data.value.Bmoney < data.value.F_MinMoney) {
        alert('理财金额不能低于最低理财金额');
        return;
    }

    axios({
        method: "post",
        url: "https://localhost:44305/api/Finans/AddUserFinanInfo",
        data: {
            U_Id: ULid,
            F_Id: Fid,
            UF_Money: data.value.Bmoney
        }
    })
        .then(function (res) {
            if (res.data > 0) {
                alert('用户添加理财成功！');
                router.push({
                    name: "UserFinanShowPage",
                    params: {
                        ULid: ULid
                    }
                })
            }
            else {
                alert('用户添加理财失败！');
            }
        })
        .catch(function (error) {
            console.log(error);
        })

}
</script>